<template>
    <div class="shop adSpaceManagement">
        <div style="display: flex;justify-content: space-between">

        <el-form :inline="true"
                 size="mini"
                 class="form">
            <el-form-item>
                <el-button class="addBtn" type="primary" @click="isShowDetaild">新增</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true"
                 size="mini"
                 :model="form"
                 class="form">
            <el-form-item label="模块名称:">
                <el-input class="input" v-model="form.name" placeholder="输入模块名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchShopMin">搜索</el-button>
            </el-form-item>

        </el-form>
        </div>
        <el-table
                :data="tableData"
                style="width:100%"
                max-height="600"
                class="shop_table_list"
                :cell-style="tc"
                :header-cell-style="tccolor"
        >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column label="广告位名称">
                <template slot-scope="scope">
                    <p class="shop_title">{{scope.row.name}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="广告标题"></el-table-column>
            <el-table-column label="广告类型">
                <template slot-scope="scope">
                    <p class="status—desc" v-if="scope.row.show_type==1">文字轮播</p>
                    <p class="status—desc" v-if="scope.row.show_type==2">左右轮播</p>
                    <p class="status—desc" v-if="scope.row.show_type==3">纵向展开</p>
                    <p class="status—desc" v-if="scope.row.show_type==4">上下5格</p>
                    <p class="status—desc" v-if="scope.row.show_type==5">左右3格</p>
                    <p class="status—desc" v-if="scope.row.show_type==6">一行4格</p>
                    <p class="status—desc" v-if="scope.row.show_type==7">纯文字</p>
                    <p class="status—desc" v-if="scope.row.show_type==8">纯图片</p>
                    <p class="status—desc" v-if="scope.row.show_type==9">一行2格</p>
                </template>

            </el-table-column>
            <el-table-column prop="description" label="广告描述"></el-table-column>
            <el-table-column label='广告位尺寸'
                             width="100">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.width"
                              type="number"
                              @blur="labelwidthChange(scope.row.id, scope.row.width)"/>
                    <el-input v-model="scope.row.height"
                              type="number"
                              @blur="labelheightChange(scope.row.id, scope.row.height)"/>
                </template>
            </el-table-column>
            <el-table-column label="是否显示标题">
                <template slot-scope="scope">
                    <p class="status—desc" v-if="scope.row.title_show==1">是</p>
                    <p class="status—desc" v-if="scope.row.title_show==0">否</p>
                </template>
            </el-table-column>
            <el-table-column label="投放平台">
                <template slot-scope="scope">
                    <p class="status—desc" v-if="scope.row.app_type==1">微信小程序</p>
                    <p class="status—desc" v-if="scope.row.app_type==0">APP</p>
                    <p class="status—desc" v-if="scope.row.app_type==2">支付宝小程序</p>
                </template>

            </el-table-column>
            <el-table-column label="状态" width="110">
                <template slot-scope="scope">
                    <el-switch
                            :key="scope.row.id"
                            :active-value="1"
                            :inactive-value="0"
                            :value="scope.row.status"
                            @change="isUseActivityChange(scope.row.id,scope.row.status)"
                    ></el-switch>
                    <p class="status—desc" v-if="scope.row.status==1">可用</p>
                    <p class="status—desc" v-if="scope.row.status==2">不可用</p>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" @click="openShopMinDetail(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deleteShopMin(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24">
            <div class="pagination">
                <el-pagination
                        background
                        @current-change="pageChange"
                        :current-page="form.page"
                        :page-size="20"
                        layout="total, prev, pager, next, jumper"
                        :total="total"
                ></el-pagination>
            </div>
        </el-col>

        <jdialog
                title="新增广告模块"
                :visible.sync="isShowDetail"
                width="600px">
            <el-row class="shop_info_dalog">
                <el-col :span="4">模块名称:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.name"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告标题:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.title"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告类型:</el-col>
                <el-col :span="8">
                    <el-select v-model="addlist.show_type"
                               clearable
                               placeholder="请选择">
                        <el-option
                                v-for="item in addlistboard"
                                :value="item.id"
                                :key="item.id"
                                :label="item.name">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">标题显示:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.title_show">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">状态是否启用:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.status">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告位尺寸:</el-col>
                <el-col :span="11" style="display: flex;align-items: center">
                    <p style="display: flex;align-items: center"> 宽：
                        <el-input v-model="addlist.width"/> px</p>

                    <p style="display: flex;margin-left: 20px;align-items: center">高：
                    <el-input v-model="addlist.height"/> px</p>

                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告位说明:</el-col>
                <el-col :span="15">
                    <el-input placeholder v-model="addlist.description" type="textarea" auotosize></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">是否可关闭:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.is_close">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">投放平台:</el-col>
                <el-col :span="18">
                    <el-radio-group v-model="addlist.app_type">
                        <el-radio :label="0">APP</el-radio>
                        <el-radio :label="1">微信小程序</el-radio>
                        <el-radio :label="2">支付宝小程序</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">排序优先级:</el-col>
                <el-col :span="15">
                    <el-radio-group v-model="addlist.sort_type">
                        <el-radio :label="0">最高优先级</el-radio>
                        <el-radio :label="1">最低优先级</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>

            <div class="dialog-footer">
                <el-button size='mini' @click="isShowDetailf">取 消</el-button>
                <el-button size='mini' type="primary" @click="submitGoods">确 定</el-button>
            </div>
        </jdialog>
        <jdialog
                title="修改广告模块"
                :visible.sync="isShowUpdate"
                width="600px">
            <el-row class="shop_info_dalog">
                <el-col :span="4">模块名称:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.name"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告标题:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.title"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告类型:</el-col>
                <el-col :span="8">
                    <el-select v-model="addlist.show_type"
                               clearable
                               placeholder="请选择">
                        <el-option
                                v-for="item in addlistboard"
                                :value="item.id"
                                :key="item.id"
                                :label="item.name">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">标题显示:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.title_show">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">状态是否启用:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.status">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告位尺寸:</el-col>
                <el-col :span="11" style="display: flex;align-items: center">
                    <p style="display: flex;align-items: center"> 宽：
                        <el-input v-model="addlist.width"/> px</p>

                    <p style="display: flex;margin-left: 20px;align-items: center">高：
                    <el-input v-model="addlist.height"/> px</p>

                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">广告位说明:</el-col>
                <el-col :span="15">
                    <el-input placeholder v-model="addlist.description" type="textarea" auotosize></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">是否可关闭:</el-col>
                <el-col :span="8">
                    <el-radio-group v-model="addlist.is_close">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">投放平台:</el-col>
                <el-col :span="18">
                    <el-radio-group v-model="addlist.app_type">
                        <el-radio :label="0">APP</el-radio>
                        <el-radio :label="1">微信小程序</el-radio>
                        <el-radio :label="2">支付宝小程序</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">排序优先级:</el-col>
                <el-col :span="15">
                    <el-radio-group v-model="addlist.sort_type">
                        <el-radio :label="0">最高优先级</el-radio>
                        <el-radio :label="1">最低优先级</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>

            <div class="dialog-footer">
                <el-button size='mini' @click="isShowUpdate=false">取 消</el-button>
                <el-button size='mini' type="primary" @click="submitGoodsInfo">确 定</el-button>
            </div>
        </jdialog>


    </div>
</template>

<script>
    import errorImg from "@/assets/images/error_img.png";
    // import uploadImg from "@/components/uploadImg";
    import {
        adadboardlist,
        adboarddelete,
        adboardupdate,
        adboardcreate
    } from "@/api/goods";

    // import shopadministrationdetail from './shopadministrationdetail'
    export default {
        name: "adSpaceManagement",
        components: {
            // uploadImg
        },
        mounted() {
            this.getProductListData();
        },
        data() {
            return {
                addlist:{
                    name:'',
                    title:'',
                    status:1,
                    url_type:'',
                    height:300,
                    width:300,
                    sort_type:0,
                    app_type:0,
                    is_close:1,
                    title_show:1,
                    description:'',
                },
                addlistboard:[
                    {
                    name:'文字轮播',
                    id:1,
                },{
                    name:'左右轮播',
                    id:2,
                },{
                    name:'纵向展开',
                    id:3,
                },{
                    name:'上下5格',
                    id:4,
                },{
                    name:'左右3格',
                    id:5,
                },{
                    name:'一行2格',
                    id:9,
                },{
                    name:'一行4格',
                    id:6,
                },{
                    name:'纯文字',
                    id:7,
                },{
                    name:'纯图片',
                    id:8,
                }],
                //展示详情
                isShowDetail: false,
                errorImg,
                form: {
                    name: "",
                    page: 1
                },
                total: 0,
                tableData: [],
                //商品详情
                productDetail: {},
                //图片列表
                img_url: [],
                isShowUpdate:false
            };
        },
        methods: {
            isShowDetailf(){
              this.isShowDetail=false
              this.addlist= {
                  name:'',
                  title:'',
                  status:1,
                  url_type:'',
                  height:300,
                  width:300,
                  sort_type:0,
                  app_type:0,
                  is_close:1,
                  title_show:1,
                  description:'',
              }
            },
            isShowDetaild(){
              this.isShowDetail=true
              this.addlist= {
                  name:'',
                  title:'',
                  status:1,
                  url_type:'',
                  height:300,
                  width:300,
                  sort_type:0,
                  app_type:0,
                  is_close:1,
                  title_show:1,
                  description:'',
              }
            },
            //排序
            labelwidthChange(id, width) {
                adboardupdate({id, width}).then(res => {
                    this.$message.success(res.message)
                })
            },
            labelheightChange(id, height) {
                adboardupdate({id, height}).then(res => {
                    this.$message.success(res.message)
                })
            },
            tc() {
                return "text-align:center; color:#333333; font-size:12px;";
            },
            tccolor() {
                return "text-align:center;background-color:#f5f5f5; font-size:14px;";
            },
            //获取商品列表
            async getProductListData() {
                var url =
                    "name=" + this.form.name +
                    "&page=" + this.form.page;
                let res = await adadboardlist(url);
                this.tableData = res.data.data;
                this.total = res.data.total;
            },
            //根据关键词重新获取小店
            searchShopMin() {
                this.getProductListData();
            },
            pageChange(page) {
                this.form.page = page;
                this.getProductListData();
            },

            async isUseActivityChange(id, e) {
                if (e === 1) {
                    //下架
                    this.getDownProductData(id);
                } else {
                    //上架
                    this.getUpProductData(id);
                }
            },
            //上架商品
            async getUpProductData(id) {
                let res = await adboardupdate({id,status:1});
                if (res.code === 10000) {
                    this.$message.success("启用成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },
            //下架商品
            async getDownProductData(id) {
                let res = await adboardupdate({id,status:2});
                if (res.code === 10000) {
                    this.$message.success("下架成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },

            //删除商品
            async getDeleteProductData(cid) {
                let res = await adboarddelete({id: cid});
                if (res.code === 10000) {
                    this.$message.success("删除商品成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },
            //查看详情
            openShopMinDetail(e) {
                this.isShowUpdate = true;
                // this.getProductDetailInfoData(id);
                console.log(e)
                this.addlist = e
            },

            //删除
            deleteShopMin(id) {
                this.$confirm('确认删除该商品', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.getDeleteProductData(id);
                }).catch(() => {
                    console.log('cancel')
                });

            },

            //获取商品图片
            getFile(file) {
                if (file.files && file.files.length && file.name == 'shopadministration_pic_list') {
                    this.img_url = file.files.map(obj => obj.url)
                }
            },
            //修改商品点击确定
            submitGoods() {
                this.getEditProductData();
            },
            //修改商品点击确定
            submitGoodsInfo() {
                this.getUpdateData();
            },

            //新增商品
            async getEditProductData() {
                var form = {
                    name: this.addlist.name,
                    title: this.addlist.title,
                    show_type: this.addlist.show_type,
                    title_show: this.addlist.title_show,
                    status: this.addlist.status,
                    width: this.addlist.width,
                    height: this.addlist.height,
                    is_close: this.addlist.is_close,
                    app_type: this.addlist.app_type,
                    sort_type: this.addlist.sort_type,
                    description: this.addlist.description,
                };
                console.log(form);
                let res = await adboardcreate(form);
                if (res.code === 10000) {
                    this.$message.success("新增成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
                this.isShowDetail = false;
            },
            //编辑商品
            async getUpdateData() {
                var form = {
                    name: this.addlist.name,
                    title: this.addlist.title,
                    show_type: this.addlist.show_type,
                    title_show: this.addlist.title_show,
                    status: this.addlist.status,
                    width: this.addlist.width,
                    height: this.addlist.height,
                    is_close: this.addlist.is_close,
                    app_type: this.addlist.app_type,
                    sort_type: this.addlist.sort_type,
                    description: this.addlist.description,
                    id: this.addlist.id,
                };
                console.log(form);
                let res = await adboardupdate(form);
                if (res.code === 10000) {
                    this.$message.success("编辑成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
                this.isShowUpdate = false;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .shop {
        padding: 20px;
        position: relative;

        .search {
            float: right;
            .input {
                width: 200px;
            }
        }
        .shop_table_list {
            margin-top: 20px;
        }
        .shop_title {
            font-weight: 700;
        }

        .pagination {
            float: right;
        }
        .status—desc {
            display: inline;
            margin-left: 5px;
        }

        .img_main {
            color: #ffffff;
            background-color: #f4222d;
            width: 60px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 10%;
            margin-left: 30px;
            // z-index: !important;
        }
        .shop_info_dalog {
            margin-top: 20px;
            padding: 0 20px;
        }
        .dialog-footer {
            margin: 20px 0;
            text-align: center;
        }
    }
</style>
<style>
    .adSpaceManagement .el-input__inner{
        height: 30px!important;
    }
</style>
